/**
 * 为页面添加水印的函数
 * @param {string} text - 水印显示的文本内容
 */
export function addWatermark(text) {
    // 删除已存在的水印，防止重复添加
    const oldWatermark = document.getElementById('watermark')
    if (oldWatermark) {
        oldWatermark.remove()
    }

    // 创建canvas元素用于绘制水印
    const canvas = document.createElement('canvas')
    // 设置canvas的宽度和高度，这将决定单个水印的大小
    canvas.width = 300
    canvas.height = 150
    // 获取canvas的2D绘图上下文
    const ctx = canvas.getContext('2d')

    // 配置水印文字的样式
    ctx.font = '17px Arial'  // 设置字体大小和字体族
    ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'  // 设置文字颜色和透明度
    ctx.rotate(-10 * Math.PI / 180)  // 将文字旋转-15度（逆时针）
    ctx.fillText(text, 0, 100)  // 在canvas上绘制文本

    // 创建一个div元素作为水印容器
    const div = document.createElement('div')
    div.id = 'watermark'  // 设置id，方便后续查找和删除
    div.style.position = 'fixed'  // 固定定位，相对于浏览器窗口
    div.style.top = '0'  // 顶部对齐
    div.style.left = '0'  // 左侧对齐
    div.style.width = '100%'  // 宽度铺满
    div.style.height = '100%'  // 高度铺满
    div.style.background = `url(${canvas.toDataURL()}) repeat`  // 将canvas转换为图片URL并设置为重复背景
    div.style.pointerEvents = 'none'  // 使水印不影响页面交互
    div.style.zIndex = '9999'  // 设置较高的层级，确保水印显示在其他元素之上

    // 将水印容器添加到页面的body元素中
    document.body.appendChild(div)
}

/**
 * 移除页面上的水印
 */
export function removeWatermark() {
    const watermark = document.getElementById('watermark')
    if (watermark) {
        watermark.remove()
    }
}